<template>
	<view>
		<!-- 表单 -->
		<view class="example">
			<!-- 自定义表单校验 -->
			<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
				<uni-forms-item label="类型" required>
					<uni-data-checkbox v-model="customFormData.type" :localdata="type" />
				</uni-forms-item>
				<uni-forms-item label="分类" required name="cate">

					<uni-data-picker placeholder="请选择分类" popup-title="请选择记账类别" :localdata="cateList"
						:map="{text:'name',value:'id'}" v-model="customFormData.cate">
					</uni-data-picker>
					<!-- <uni-easyinput v-model="customFormData.cate" placeholder="请输入分类" /> -->
				</uni-forms-item>
				<uni-forms-item label="日期时间" required name="datetime">
					<uni-datetime-picker type="datetime" return-type="timestamp" v-model="customFormData.datetime" />
				</uni-forms-item>
				<uni-forms-item label="金额" required name="money">
					<uni-easyinput type="number" v-model="customFormData.money" placeholder="请输入金额" />
				</uni-forms-item>
				<uni-forms-item label="备注" required name="detail">
					<uni-easyinput v-model="customFormData.detail" placeholder="请输入备注" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('customForm')">提交</button>
		</view>
		<!-- 在页面内添加对应的节点 -->
		<van-notify id="van-notify" />
	</view>
</template>

<script>
	import Notify from '../../wxcomponents/vant/notify/notify.js';
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				// 表单数据
				customFormData: {
					type: 0, //类型 支出\收入
					cate: null, //分类
					datetime: new Date().getTime(), //日期
					money: null, // 金额
					detail: '', // 备注
				},
				// 单选数据源
				type: [{
					text: '支出',
					value: 0
				}, {
					text: '入账',
					value: 1
				}],
				// 表单验证规则
				customRules: {
					money: {
						rules: [{
							required: true,
							errorMessage: '金额不能为空',
							format: Number
						}]
					},
					datetime: {
						rules: [{
							required: true,
							errorMessage: '时间不能为空'
						}]
					},
					cate: {
						rules: [{
							required: true,
							errorMessage: '分类必须选择!!'
						}]
					},
				},
			};
		},
		computed: {
			...mapState('m_cate', ['cateList']),
			...mapState('m_user', ['userInfo']),
		},
		onLoad() {
			// this.setDataTree(),
			console.log("打印", this.dataTree);
		},
		methods: {
			// 点击了提交
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
					// 设置时间
					this.customFormData.datetime = this.formatDate(new Date(this.customFormData.datetime),
						'yyyy-MM-dd hh:mm:ss')
					// 设置月份
					this.customFormData.month = this.formatDate(new Date(this.customFormData.datetime),
						'yyyy-MM-dd')
					this.customFormData.phone = this.userInfo.username
					console.log("打印表单数据", this.customFormData);
					this.setInfo(this.customFormData)

				}).catch(err => {
					console.log('err', err);
					Notify({
						type: 'danger',
						message: '请检查是否填写完整'
					});
				})
			},
			// 记一笔,添加一笔账单
			async setInfo(form) {
				const {
					data: res
				} = await uni.$http.post("/info/addInfo",
					form
				)
				console.log("记账结果", res);
				if (res.code == 0) {
					Notify({
						type: 'success',
						message: '添加成功'
					});
					uni.navigateTo({
						url: '../home/home'
					})
				} else {
					Notify({
						type: 'danger',
						message: '添加失败'
					});
				}
			},



			// 日期过滤器
			formatDate(date, fmt) {
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
				}
				let o = {
					'M+': date.getMonth() + 1,
					'd+': date.getDate(),
					'h+': date.getHours(),
					'm+': date.getMinutes(),
					's+': date.getSeconds()
				}
				for (let k in o) {
					if (new RegExp(`(${k})`).test(fmt)) {
						let str = o[k] + ''
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
					}
				}
				return fmt
			},
			padLeftZero(str) {
				return ('00' + str).substr(str.length)
			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}
</style>
